<template>
  <div class="wrapper">
    <common-header :title="title"></common-header>
    <common-scroll class="scroll"
                   ref="scroll"
                   :data="cardList">
      <div class="content">
        <ul class="card">
          <li class="card-item"
              v-for="(item, index) of cardList"
              :key="item.id">
            <div class="left">
              <div class="title">{{item.shop_name}}</div>
              <div class="desc">满{{item.tap_amount}}减{{item.money}}</div>
              <div class="address">{{item.district}}{{item.address}}</div>
            </div>
            <div class="right">
              <div class="code"
                   v-if="item.used === 0"
                   @click="handleShowPop(index)">
                <span class="iconfont">
                  &#xe600;
                </span>
              </div>
              <div class="code"
                   v-else>
                <span class="iconfont">
                  &#xe60d;
                </span>
              </div>
            </div>
            <common-location class="location"
                             :distance="item.distance"></common-location>
          </li>
        </ul>
      </div>
    </common-scroll>
    <van-popup v-model="show"
               class="">
      <img :src="imgUrl"
           alt="">
    </van-popup>
  </div>
</template>

<script>
import CommonHeader from 'common/header/Header'
import CommonScroll from 'common/scroll/Scroll'
import CommonLocation from 'common/location/Location'
export default {
  name: 'MeVcard',
  components: {
    CommonHeader,
    CommonScroll,
    CommonLocation
  },
  data () {
    return {
      title: '大微卡卷',
      cardList: [],
      imgUrl: '',
      show: false
    }
  },
  computed: {
    codeArray () {
      const result = []
      this.cardList.map((item) => {
        result.push(item.coupon_code)
      })
      return result
    }
  },
  methods: {
    getAllCard () {
      // 判断登陆
      this.$api.card.getAllCard({ page: 1 })
        .then(this.getCardSucc)
        .catch((e) => {
          console.log(e)
        })
    },
    getCardSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.cardList = data
      }
    },
    handleShowPop (index) {
      const code = this.codeArray[index]
      const URL_CODE = `http://api.dawei.zyuu.cn/api/qcode/reserve?code=${code}`
      this.show = true
      this.imgUrl = URL_CODE
    }
  },
  created () {
    this.getAllCard()
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  z-index 5
  background-color $bgcWh

  .scroll
    background-color $bgc
    top 104px

    .card
      padding()
      padding-top 20px

      .card-item
        margin-bottom 20px
        border-radius 6px
        background-color $bgcWh
        box-sizing border-box
        padding-top 16px
        padding-right 16px
        padding-bottom 16px
        padding-left 30px
        display flex
        justify-content space-between

        .title
          font-size $fzThird
          color $fzColor
          font-weight 700
          line-height 60px

        .desc
          font-size $fzFifth
          color $fzColor
          line-height 55px

        .address
          max-width 562px
          ellipsis()
          font-size $fzFifth
          color $fzColor
          line-height 52px

        .code
          width 56px
          height 56px
          color $graySecond

          span
            font-size 56px

      .location
        right 50px
        top 160px
</style>
